<template>
  <div>
    <div class="page-item  page-callrecords">
      <div class="page-content" ref="pageTab">
        <div class="page-tab">
          <el-form :model="selectForm" ref="selectForm"  label-width="86px" class="form">
            <el-form-item label="运营商名称:" class="form-item">
              <el-input v-model="selectForm.operatorName" placeholder="请输入运营商名称" style="width: 200px"></el-input>
              <el-button type="primary" icon="el-icon-search" class="form-btn" @click="onSelect()">搜索</el-button>
            </el-form-item>
            <!--            <el-button type="primary" icon="el-icon-plus" class="form-btn" @click="onAddRow()">添加</el-button>-->
          </el-form>
          <!-- 表格试视图 v-if="cutLayout"-->
          <el-table
            :data="tableDataList"
            style="width: 100%;height: 60%"

            border
            :header-cell-style="{ background: '#00abbe', color: '#fff' }">
            <el-table-column prop="operatorId" label="ID" width="50" align="center"></el-table-column>
            <el-table-column align="center" prop="operatorAccount" min-width="100" label="运营商账号"></el-table-column>
              <el-table-column align="center" prop="operatorTime" min-width="100" label="运营商注册时间"></el-table-column>
            <el-table-column align="center" prop="operatorName" label="运营商名字"></el-table-column>
            <el-table-column align="center" prop="warehouseStateId" min-width="100" label="运营商状态"></el-table-column>
            <el-table-column align="center" prop="operatorPhone" min-width="100" label="运营商电话"></el-table-column>
            <el-table-column align="center" prop="operatorAddress" width="226" min-width="170" label="运营商地址"></el-table-column>
            <el-table-column align="center" prop="operatorLicence" min-width="100" label="运营商许可证"></el-table-column>
            <el-table-column align="center" label="操作" width="250">
              <template slot-scope="scope"> <!-- size="small" -->
                <el-button
                  size="mini" class="primary" round
                  @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
              <el-button
                size="mini" class="operation-btn operation-btn-delete" round
                type="danger"
                @click="handleDelete(scope.$index, scope.row )">删除</el-button>
                <el-button
                  size="mini" class="primary" round
                  type="primary"
                  @click="changpassword(scope.$index, scope.row )">重置密码</el-button>
            </template>
          </el-table-column>
        </el-table>

        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage4"
          :page-sizes="[5, 10, 20, 30]"
          :page-size=pagetRowNum
          layout="prev, pager, next,  sizes, total, jumper"
          :total="total"
        ></el-pagination>
      </div>
    </div>
    <!-- 新增 编辑 窗口 -->
    <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" class="change-pwd" style="width:1300px;" >
      <table>
        <tr>
          <td width="10px;">&nbsp;&nbsp;&nbsp;&nbsp;</td>
          <td>
            <el-form :model="dialogForm" ref="dialogForm">
              <el-form-item label="请输入账号：" class="form-item" v-show="false">
                <el-input v-model="dialogForm.operatorId" placeholder=""></el-input>
              </el-form-item>
              <el-form-item label="请输入账号：" class="form-item">
                <el-input v-model="dialogForm.operatorAccount" placeholder="请输入账号"></el-input>
              </el-form-item>
              <el-form-item label="时间" class="form-item">
                <el-input v-model="dialogForm.operatorTime" placeholder="请输入时间"></el-input>
              </el-form-item>
              <el-form-item label="运营商名字" class="form-item">
                <el-input v-model="dialogForm.operatorName" placeholder="请输入运营商名字"></el-input>
              </el-form-item>
              <el-form-item label="状态" class="form-item">
                <el-input v-model="dialogForm.warehouseStateId" placeholder="请输入状态"></el-input>
              </el-form-item>
              <el-form-item label="电话" class="form-item">
                <el-input v-model="dialogForm.operatorPhone" placeholder="请输入电话"></el-input>
              </el-form-item>
              <el-form-item label="地址" class="form-item">
                <el-input v-model="dialogForm.operatorAddress" placeholder="请输入地址"></el-input>
              </el-form-item>
              <el-form-item label="许可证编号" class="form-item">
                <el-input v-model="dialogForm.operatorLicence" placeholder="请输入编号"></el-input>
              </el-form-item>
            </el-form>
            <div>
              <el-button @click="dialogCancel()">取消</el-button>
              <el-button type="primary" v-on:click="dialogSave()" :loading="addLoading">保存</el-button>
            </div>
          </td>
        </tr>
      </table>
    </el-dialog>
  </div>
  </div>
</template>

<script>
  //import { mapState } from 'vuex'
  var _index; //定义一个全局变量，以获取行数据的行号
  export default {
    name: '',
    components: {},
    props: {},
    data() {
      return {
        dialogTitle:'',//对话框标题
        dialogVisible: false,//是否显示新增窗口
        dialogForm: [],//对话框中的form 新增和编辑
        pageCurrentNum:'',//当前页码
        addLoading: false,
        selectForm: { //查询条件的form
          name: '',
          phone: '',
          classify: ''
        },
        tableData: [],
        tableDataList: [],
        tableDataSelect: [],
        currentPage4: 1,
        tabHeight: 1080,
        total: 0,
        pagetRowNum: 5,//每页显示的行数
        //cutLayout: false,
      }
    },
    computed: {
      //...mapState(['tableDataAllPage'])
    },
    watch: {},

    beforeCreate() {},
    beforeUpdate() {
      this.tabHeight = this.$refs.pageTab.offsetHeight - 137
    },
    beforeMount() {},
    mounted() {
      let _this = this
      window.onresize = function() {
        if (_this.$refs.pageTab) {
          _this.tabHeight = _this.$refs.pageTab.offsetHeight - 137
        }
      }

      initTable(this);//初始化列表
    },

    methods: {
      handleSizeChange(val) { //每页显示条数 变化事件
        console.log(`每页的行数 ${val} 条`)
        this.pagetRowNum= val;
        initTable(this);//改变每页的行数则 重新计算列表
      },
      handleCurrentChange(val) { //页码 变化事件
        console.log(`当前页: ${val}`)
        // this.tableDataList = this.tableDataAllPage[val-1].list;
        this.currentPage4=val;//当前页码
        initTable(this);
      },
      //查询
      onSelect() {
         console.log('onSelect 查询框里的数是啥 ' + this.selectForm.operatorName );
          this.$axios.post("/onSelect", {
            tbOperator:{
              operatorName: this.selectForm.operatorName,//取值
            },
            pageInf:{
              page:this.currentPage4,
              size:this.pagetRowNum
            }
          }).then(resp =>{
            if (resp) {
              this.tableDataList = resp.data.SelectList
              this.total = resp.data.count
              console.log(this.total + "," + resp.data.SelectList)
            }
          }).catch(err =>{
            alert(err)
          })
      },
      //新增数据
      onAddRow() {
        _index=-1;//-1为新增
        this.dialogTitle='新增';
        this.dialogVisible = true;
        this.dialogForm = {
          name: '',
          phone1: '',
          phone2: '',
          address: '',
          remark: ''
        }
      },
      //编辑数据--------------------------------------------------------
      handleEdit(index, row) {
        console.log("handleEdit index:"+index+"  operatorAccount:"+row.operatorAccount);
        this.dialogTitle='修改';
        this.dialogVisible = true;
        this.dialogForm = Object.assign({}, row);
        _index = index;//用于判断是新增还是编辑
        //取到这一栏的值，也就是明白是在那一栏进行操作，从而将编辑后的数据存到表格中
      },
      //取消按扭
      dialogCancel() {
        this.dialogVisible = false;//对话框 不显示
      },
      //对话框 保存按钮
      dialogSave(){
        if(_index==-1){
          this.sumbitAddRow(); //保存 新增
        }else{
          this.sumbitEditRow();//保存 编辑
        }
      },
      //将新增的数据添加到表格中
      sumbitAddRow() {
        console.log( "name: "+ this.dialogForm.name);
        var new_id=this.tableDataList[this.tableDataList.length-1].id;
        new_id=  parseInt(new_id) + 1;//id 自动加 1
        console.log( "new_id "+ new_id);
        this.tableform = this.tableform || []
        this.tableDataList.push({
          id: new_id,
          name: this.dialogForm.name,
          phone1: this.dialogForm.phone1,
          phone2: this.dialogForm.phone2,
          address: this.dialogForm.address,
          remark: this.dialogForm.remark,
        })
        //storage.set('url', this.url);
        this.handleCurrentChange(this.tableDataAllPage.length);//页码变化事件 跳到最后一页
        this.dialogVisible = false;//对话框 不显示
      },
      //保存编辑
      sumbitEditRow() {
        console.log("sumbitEditRow _index:"+_index+"  name:"+this.dialogForm.operatorName);
        this.dialogVisible = false;//对话框 不显示
        //更新当前列表的行内容
        var editData_index = _index;//当前页的行号
        this.tableDataList[editData_index].operatorId = this.dialogForm.operatorId;
        this.tableDataList[editData_index].operatorAccount = this.dialogForm.operatorAccount;
        this.tableDataList[editData_index].operatorTime = this.dialogForm.operatorTime;
        // this.tableDataList[editData_index].operatorName = this.dialogForm.operatorName;
        // this.tableDataList[editData_index].warehouseStateId = this.dialogForm.warehouseStateId;
        // this.tableDataList[editData_index].operatorPhone = this.dialogForm.operatorPhone;
        // this.tableDataList[editData_index].operatorAddress = this.dialogForm.operatorAddress;
        // this.tableDataList[editData_index].operatorLicence = this.dialogForm.operatorLicence;
        changOperator (this);

      },
      changpassword(index, row) {
        this.$axios.post("ChangePwdOperator", {
            operatorId:row.operatorId
        }).then(resp => {
          if (resp) {
            if(resp.data=='true'){
              alert("修改成功")
              this.$message.success(resp.data)
              initTable(this)
            }else{
              this.$message.error(resp.data)
            }
          }
        })

      },

      handleDelete(index, row) {

        // console.log(index, row);
        // alert(row.warehouseId)
        console.log("handleDelete index:"+index+"  name:"+row.name);
        //   this.$confirm('确认要删除该数据,handleDelete 是否继续?', '提示', {
        //     confirmButtonText: '确定',
        //     cancelButtonText: '取消',
        //     type: 'warning'
        this.$axios.get("delOperator", {
          params:{
            operatorId:row.operatorId
          }
        }).then(resp => {
          if (resp) {

            alert("删除成功")
          }else {
            alert("删除失败")
          }
        })

      },
    }
  }

  function changOperator ($this) {
    $this.$axios.post("/changOperator", {
      operatorId: $this.dialogForm.operatorId,
      operatorAccount: $this.dialogForm.operatorAccount,
      operatorTime: $this.dialogForm.operatorTime,
      operatorName: $this.dialogForm.operatorName,
      warehouseStateId: $this.dialogForm.warehouseStateId,
      operatorPhone: $this.dialogForm.operatorPhone,
      operatorAddress: $this.dialogForm.operatorAddress,
      operatorLicence: $this.dialogForm.operatorLicence,
    }).then(resp => {
      if (resp) {
        console.log("正在编辑数据id为：" + $this.dialogForm.operatorId)
        alert("修改成功")
      }else {
        alert("修改失败")
      }
    }).catch(err =>{
      alert(err)
    })
  }

  function initTable ($this) {
    $this.$axios.post('getOperatorList',{
        page: $this.currentPage4,
        size: $this.pagetRowNum
    }).then(resp =>{
      if (resp) {
        $this.tableDataList = resp.data.operatorList
        $this.total = resp.data.count
          console.log($this.total + "," + resp.data.operatorList)
      }
    }).catch(err => {
      alert(err)
    })
  }
</script>

